<template>
    <div>
       <svg :style="{width,height}">
        <!-- xlink:href执行哪一个图标，属性值务必:'#icon-图标名字'- -->
        <!-- use标签fill属性可以设置图标的颜色 -->
        <use :xlink:href="prefix + name" :fill='color'></use>
      </svg>
    </div>
 </template>
 
 <script lang="ts" setup name="SvgIcon"> 
  // 接收父组件传递过来的参数
  defineProps({
     // xlink:href属性值的前缀
     prefix: {
       type: String,
       default: '#icon-',
     },
     name:String,
     color:{
         type:String,
         default:''
     },
     
     // 图标宽高
     width: {
       type: String,
       default: '16px',
     },
     
     height: {
       type: String,
       default: '16px',
     }
  })
 </script>
 
 <style>
 
 </style>